<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=0.75">
    <title>嗨多磨~</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
    <script src="./js/main.js"></script>
    <script src="./js/Math.js"></script>
</head>

<body>
    <!-- <div id="homePage">
        <div class="homePageMain">
            <div class="title text-center">
                <h2><span>想</span><span>和</span><span>AI</span>少女<span>对</span><span>话</span><span>吗</span></h2>
                <p>要不~点击下方神秘绿色的开关试试看？</p>
                <button id="homePageBtn" onclick="homeCreateWindow()"></button>
            </div>
        </div>
    </div>
    <div id="whitePage2">
    </div> -->
    <div id="chatPage">
        <div class="chatPageShell">
            <div class="option">
                <div class="optionTop">
                    <ion-icon name="grid-outline"></ion-icon>
                    <ion-icon name="chatbubble-ellipses-outline"></ion-icon>
                    <ion-icon name="people-outline"></ion-icon>
                    <ion-icon name="call-outline"></ion-icon>
                    <ion-icon name="bookmark-outline"></ion-icon>
                    <ion-icon name="settings-outline"></ion-icon>
                </div>
                <div class="optionBottom">
                    <ion-icon name="alert-circle-outline"></ion-icon>
                    <ion-icon name="log-out-outline"></ion-icon>
                </div>
            </div>
            <div class="chatList">
                <div class="headPhoto">
                    <div class="headImg">
                        <img src="./image/head.png" alt="">
                    </div>
                    <div class="headPhotoText">
                        <p>Khaby Lame</p>
                        <a>My account</a>
                    </div>
                </div>
                <div class="messageList">
                    <div class="onlineNow">
                        <div class="onlineText">
                            <p>Online now</p><span>5</span>
                        </div>
                        <div class="onlineLogo">
                            <img src="./image/aihead.bmp" alt="">
                            <img src="./image/null-12f0ac330e597ee1.jpg" alt="">
                            <img src="./image/null-3cef6fb4589e8802.jpg" alt="">
                            <img src="./image/null-559e71f89828f197.jpg" alt="">
                            <img src="./image/null5a17441d70a90791.jpg" alt="">
                        </div>
                    </div>
                    <div class="message">
                        <div class="messageHead">
                            <div class="messageHeadLeft">
                                <p>Message</p>
                                <ion-icon name="chevron-down-outline"></ion-icon>
                            </div>
                            <div class="messageHeadRight">
                                <ion-icon name="create-outline"></ion-icon>
                            </div>
                        </div>
                        <div class="messageSearch">
                            <div>
                                <ion-icon name="search-outline"></ion-icon>
                            </div>
                            <input type="text" placeholder="Search">
                        </div>
                        <div class="messageMain">
                            <div class="messageChat">
                                <div class="messageChatImg">
                                    <img src="./image/aihead.bmp" alt="">
                                </div>
                                <div class="chatInfo">
                                    <p>Kizuna Ai</p>
                                    <p id="sendedMsg">...</p>
                                </div>
                            </div>
                            <div class="messageChat">
                                <div class="messageChatImg">
                                    <img src="./image/null-3cef6fb4589e8802.jpg" alt="">
                                </div>
                                <div class="chatInfo">
                                    <p>Uesuki Hanako</p>
                                    <p>You：いやだ いやだのなの風</p>
                                </div>
                            </div>
                            <div class="messageChat">
                                <div class="messageChatImg">
                                    <img src="./image/null-12f0ac330e597ee1.jpg" alt="">
                                </div>
                                <div class="chatInfo">
                                    <p>Midori</p>
                                    <p>You：全て夢で ものすごく濃い</p>
                                </div>
                            </div>
                            <div class="messageChat">
                                <div class="messageChatImg">
                                    <img src="./image/null1999cb0bca7c0f12.jpg" alt="">
                                </div>
                                <div class="chatInfo">
                                    <p>Sen Chan</p>
                                    <p>You：ぴとり ぴとりってたい</p>
                                </div>
                            </div>
                            <div class="messageChat">
                                <div class="messageChatImg">
                                    <img src="./image/null5a17441d70a90791.jpg" alt="">
                                </div>
                                <div class="chatInfo">
                                    <p>Kuriyama Mirai</p>
                                    <p>You：響くクラップ 奏でメロり</p>
                                </div>
                            </div>
                            <div class="messageChat">
                                <div class="messageChatImg">
                                    <img src="./image/null6e18401ff7f8d14c.jpg" alt="">
                                </div>
                                <div class="chatInfo">
                                    <p>Yuuki</p>
                                    <p>You：せーのっ！</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="chatRegion">
                <div class="chatTitle">
                    <p>Kizuna AI</p>
                    <p id="inputStatus">在线</p>
                </div>
                <div class="chatFrame">
                    <div id="replaceItem"></div>
                </div>
                <div class="chatInput">
                    <div class="chatInputMain">
                        <div class="inputHeadPhoto">
                            <img src="./image/head.png" alt="">
                        </div>
                        <div class="inputBody">
                            <input id="getMsg" value="" type="text" placeholder="メッセージを入力してください" onfocus="if(placeholder=='请输入内容'){placeholder=''}" onblur="if(placeholder==''){placeholder='请输入内容'}">
                        </div>
                        <div class="inputFly">
                            <ion-icon name="send-sharp" id="flyMsg"></ion-icon>
                        </div>
                    </div>
                </div>
            </div>
            <div class="userInfor">
                <div class="userInforHead">
                    <div class="inforHeadImg">
                        <img src="./image/aihead.bmp" alt="">
                    </div>
                    <div class="inforHeadText">
                        <p>@KiuzunaAI🎀</p>
                    </div>
                </div>
                <div class="userinforMain">
                    <div class="introduce">
                        <div class="introduceHead">
                            <p>Introduce</p>
                        </div>
                        <div class="introduceMain">
                            <p>绊爱(キズナアイ)，自称为世界第一个Virtual YouTuber，
                                YouTube频道名为A.I.Channel。角色形象由森仓圆设计，3D
                                模型由Tda制作。作为世界范围内公认的影响力最大的虚拟主播，
                                绊爱的活跃为Vtuber开创了一个崭新的时代。</p>
                            <p>爱酱的自我设定是“天才智能的超级人工AI”，白色为主色调的公式服、用粉色挑染的棕色头发
                                、粉红色的心型发箍等构成了她的形象特征。爱酱对人类的行为充满好奇，并在不断突破着AI设定
                                的局限，逐渐成为了一个性格活泼可爱的少女。当然，爱酱也是有着成熟的一面的喔!</p>
                        </div>
                    </div>
                    <div class="myFeel">
                        <div class="myFeelHead">
                            <p>Want to say</p>
                        </div>
                        <div class="myFeelText">
                            <p>おはよう、終わらないストーリー</p>
                            <br />
                            <p>即使无限期休眠，大家一样会爱着你！</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
    </script>
    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
<script src="./js/chat.js"></script>
</html>